<script setup>
import { useAudioStore } from "@/stores";
import { computed } from "vue";
const audioStore = useAudioStore();
const emits = defineEmits(["openPlayList"]);

const progressAni = computed(() => {
  const step = audioStore.duration / 360;
  const current = audioStore.currentTime / step;
  return {
    background:
      "conic-gradient(" +
      "#8867f2 " +
      0 +
      ",#8867f2 " +
      current +
      "deg" +
      ",#dddddd " +
      current +
      "deg" +
      ",#dddddd " +
      "360deg" +
      ")",
  };
});

const activeMusic = computed(
  () => audioStore.activeMusicList[audioStore.playIndex]
);

const pauseMusic = () => {
  audioStore.pause();
};

const playMusic = () => {
  if (audioStore.activeMusicList.length === 0) {
    return uni.showToast({
      icon: "none",
      title: "播放列表为空",
      mask: true,
    });
  }
  audioStore.play();
};
</script>

<template>
  <view class="lgt-control">
    <view class="left">
      <image
        class="music-img"
        mode="scaleToFill"
        v-if="activeMusic"
        :src="activeMusic?.al.picUrl + '?param=200y200'"
      />
      <image
        class="music-img"
        src="../../static/logo.png"
        mode="scaleToFill"
        v-else
      />
      <view class="music-info ellipsis1">
        <text class="music-name">
          {{ activeMusic ? activeMusic.name : "未播放" }}
        </text>
        <text class="music-author">
          {{ activeMusic ? " - " + activeMusic.ar[0].name : "" }}
        </text>
      </view>
    </view>
    <view class="right">
      <view
        class="g-progress-wrap"
        @tap="pauseMusic"
        v-show="audioStore.playStatus"
      >
        <view class="g-progress" :style="progressAni"></view>
        <view class="staus">
          <i class="iconfont icon-zanting"></i>
        </view>
      </view>
      <view
        class="g-progress-wrap"
        @tap="playMusic"
        v-show="!audioStore.playStatus"
      >
        <view class="g-progress" :style="progressAni"></view>
        <view class="staus">
          <i class="iconfont icon-bofang"></i>
        </view>
      </view>
      <i class="iconfont icon-bofangliebiao" @tap="emits('openPlayList')"></i>
    </view>
  </view>
</template>

<style lang="scss">
.lgt-control {
  padding: 0  30rpx;
  height: 100rpx;
  width: 750rpx;
  background-color: #fff;
  color: $primaryText;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 0px 6rpx #dfdfdf;
  .left {
    display: flex;
    align-items: center;
    .music-img {
      height: 80rpx;
      width: 80rpx;
      background-color: lightcoral;
      border-radius: 50%;
      overflow: hidden;
    }
    .music-info {
      width: 430rpx;
      font-size: 28rpx;
      margin-left: 20rpx;
      .music-author {
        color: $assistText;
      }
    }
  }

  .right {
    display: flex;
    align-items: center;
    margin-right: 50rpx;
    .g-progress-wrap {
      position: relative;
      margin: 0 30rpx;
      .g-progress {
        width: 50rpx;
        height: 50rpx;
        background-color: #dddddd;
        border-radius: 50%;
        transition: all 0.5s linear;
        mask: radial-gradient(
          transparent,
          transparent 20rpx,
          #000 24.5rpx,
          #000 100%
        );
      }
      .staus {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
        .icon-bofang {
          margin-left: 6rpx;
          font-size: 24rpx;
          font-weight: bold;
        }
      }
    }
    .icon-bofangliebiao {
      font-size: 54rpx;
    }
    .icon-zanting {
      font-size: 22rpx;
      font-weight: bold;
    }
  }
}
</style>
